<template>

  <el-row>
  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">

  	    <el-card :body-style="{ padding: '0px' }">
           <img src="../../assets/images/017.png" class="image">

              <div style="padding: 12px;">
                <span>嗨斗</span>

  	              <div class="bottom clearfix">
  	               <h5>商品的价格：15￥</h5>
  	                <el-button type="text" @click="outerVisible = true">立即购买</el-button>
                      <el-dialog title="购买页面" :visible.sync="outerVisible">

  	                      <span>
                            <img src="../../assets/images/017.png" class="image">
                            <h2>嗨斗:</h2>
                            <br>
  	                        <h2>数量：</h2>
                            <el-input-number v-model="good.num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
                            <h2>单价：15￥</h2>
  	                        <h2>总价格:{{ good.num*15 + "￥"}}</h2>
  	                      </span>

  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="outerVisible = false">取 消</el-button>
  	                        <el-button type="primary" @click="submitHandle">立即结算</el-button>
  	                      </div>

                      </el-dialog>
                  </div>

              </div>

        </el-card>

    </el-col>
  </el-row>

</template>

<script>
  export default {
    data() {
      return {

        good:{
          name:'嗨斗' ,
          bPrice : 15 ,
          num:0
        },

        outerVisible: false,
        innerVisible: false,
        innerVisible10: false,

      };
    },
    methods: {
      handleChange(value) {
         console.log(value);
      } ,
      handleClose_10(){
        this.outerVisible = false ;
      } ,
      submitHandle(){
        var that = this ;
        this.axios({
          url:'http://127.0.0.1:3000/goods/add' ,
          methods: 'get' ,
          params:{
            name: this.good.name ,
            number: this.good.num
          }
        }).then(function (res) {
          if(res.data.flag){
            that.$message('购买成功 ^^') ;
            that.handleClose_10() ;
          }
          else {
            alert('购买失败 QAQ') ;
            that.handleClose_10() ;
          }
        })
      }

    }
  }
</script>

<style>
  .time {
  	    font-size: 13px;
  	    color: #ffaaff;
  	  }

  	  .bottom {
  	    margin-top: 13px;
  	    line-height: 12px;
  	  }

  	  .button {
  	    padding: 0;
  	    float: right;
  	  }

  	  .image {
  	    width: 100%;
  	    display: block;
  	  }

  	  .clearfix:before,
  	  .clearfix:after {
  	      display: table;
  	      content: "";
  	  }

  	  .clearfix:after {
  	      clear: both
  	  }
</style>
